<template>
	<el-container>
		<el-aside style="width: 33%">
			<el-container>
				<el-header>
					<div class="left-panel">
					</div>
					<div class="right-panel">
						<div class="right-panel-search">
							<el-input v-model="search.keyword" placeholder="项目名称" clearable></el-input>
							<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
						</div>
					</div>
				</el-header>
				<el-main class="nopadding">
					<scTable ref="table" :apiObj="apiObj" row-key="projectId" hidePagination @row-click="showProject">
						<el-table-column label="项目名称" prop="title" width="150" :show-overflow-tooltip="true"></el-table-column>
						<el-table-column label="项目编号" prop="projectCode" width="100" :show-overflow-tooltip="true"></el-table-column>
						<el-table-column label="负责人" prop="chargeUserName" width="80"></el-table-column>
						<el-table-column label="项目预算" prop="totalCost" width="80">
							<template #default="scope">
								{{scope.row.totalCost}}/万元
							</template>
						</el-table-column>
					</scTable>
				</el-main>
			</el-container>
		</el-aside>
		<el-container>
			<el-header style="text-align: center;display: block;">
				<div style="font-weight: 600;font-size: 20px;">项目详情</div>
			</el-header>
			<el-main class="nopadding">
				<el-card>
					<el-form :model="form" :rules="rules" ref="dialogForm" label-width="100px" label-position="left">
						<el-form-item label="项目名称" prop="title">{{form.title}}</el-form-item>
						<el-row :gutter="24">
							<el-col :lg="12">
								<el-form-item label="项目类型" prop="projectType">{{form.projectTypeName}}</el-form-item>
							</el-col>
							<el-col :lg="12">
								<el-form-item label="项目编号" prop="projectCode">{{form.projectCode}}</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="24">
							<el-col :lg="12">
								<el-form-item label="项目负责人" prop="chargeUser">{{form.chargeUserName}}</el-form-item>
							</el-col>
							<el-col :lg="12">
								<el-form-item label="预算总费用" prop="totalCost">{{form.totalCost}}/万元</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="24">
							<el-col :lg="24">
								<el-form-item label="项目参与人" prop="joinUser">{{form.joinUserName}}</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="24">
							<el-col :lg="12">
								<el-form-item label="开始时间" prop="beginTime">{{form.beginTime}}</el-form-item>
							</el-col>
							<el-col :lg="12">
								<el-form-item label="结束时间" prop="endTime">{{form.endTime}}</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="24">
							<el-col :lg="12">
								<el-form-item label="所属账套" prop="budgetAccount">{{form.budgetAccountName}}</el-form-item>
							</el-col>
							<el-col :lg="12">
								<el-form-item label="资金出处" prop="cashFrom">{{form.cashFrom}}</el-form-item>
							</el-col>
						</el-row>
						<el-form-item label="项目说明"><div v-html="form.remark"></div></el-form-item>
						<el-form-item label="项目附件" prop="attachId">
							<attach-menu :attachIds="form.attachId" :roleFlag="3" :preview="true"></attach-menu>
						</el-form-item>
					</el-form>
					<el-row :gutter="24">
						<el-col :lg="12">
							<el-form-item label="已支出预算">{{payZs}}/万元</el-form-item>
						</el-col>
						<el-col :lg="12">
							<el-form-item label="剩余可用预算">{{(form.totalCost-payZs)}}/万元</el-form-item>
						</el-col>
					</el-row>
					<el-header style="text-align: center;display: block;">
						<div style="font-weight: 600;font-size: 20px;">预算费用支出明细</div>
					</el-header>
					<scTable ref="tableMx" :apiObj="apiObj1" row-key="recordId" stripe remoteSort remoteFilter show-summary :summary-method="getSummaries">
						<el-table-column label="#" type="index" width="50"></el-table-column>
						<el-table-column label="项目名称" prop="pTitle" width="150" :show-overflow-tooltip="true"></el-table-column>
						<el-table-column label="费用标题" prop="title" width="150" :show-overflow-tooltip="true"></el-table-column>
						<el-table-column label="项目编号" prop="projectCode" width="100"></el-table-column>
						<el-table-column label="费用支出" prop="cTotalCost" width="100">
							<template #default="scope">
								{{scope.row.cTotalCost}}/万元
							</template>
						</el-table-column>
						<el-table-column label="项目类型" prop="projectTypeName" width="100"></el-table-column>
						<el-table-column label="支出时间" prop="happenTime" width="100"></el-table-column>
						<el-table-column label="项目负责人" prop="chargeUserName" width="100"></el-table-column>
						<el-table-column label="预算科目" prop="budgetAccountName" width="100"></el-table-column>
						<el-table-column label="上报人" prop="createUserName" width="100"></el-table-column>
					</scTable>
				</el-card>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
import AttachMenu from '@/views/module/attachMenu'
import selectUserDialog from "@/views/module/selectUserDialog";
import {defineAsyncComponent} from "vue";

const scEditor = defineAsyncComponent(() => import('@/components/scEditor'));
export default {
	name: 'Budget Adjustment Manage',
	components: {
		AttachMenu,
		selectUserDialog,
		scEditor
	},
	data() {
		return {
			payZs:0,
			tableData:this.$refs.tableMx,
			apiObj1:this.$API.finance.budget.getBudgetCostList,
			apiObj: this.$API.finance.budget.getAllBudgetProjectList,
			selection: [],
			isSaveing: false,
			fileList: [],
			search: {
				keyword: '',
			},
			budgetAccountList: [],
			budgetAccountProps: {
				label: "title",
				value: "budgetAccountId",
				emitPath: false,
				checkStrictly: true
			},
			form: {
				projectId: '',
				title: '',
				projectTypeName: '',
				projectCode: '',
				chargeUserName: '',
				totalCost: 0,
				joinUserName: '',
				beginTime: '',
				endTime: '',
				budgetAccountName: '',
				cashFrom: '',
				remark: '',
				attachId: ''
			},
		}
	},
	watch: {
		'tableData': {
			handler(val) {
				console.log(val);
			}
		},
	},
	mounted() {
		this.getBudgetProjectList();
	},
	methods: {
		getSummaries(param) {
			const { columns, data } = param;
			const sums = [];
			columns.forEach((column, index) => {
				if (index === 0) {
					sums[index] = '支出';
					return;
				}
				const values = data.map(item => Number(item[column.property]));
				const payZss = data.map(item => {
					if(column.property=="cTotalCost")
					{
						return Number(item[column.property])
					}
				});
				if (!payZss.every(value => isNaN(value))) {
					sums[index] = values.reduce((prev, curr) => {
						const value = Number(curr);
						if (!isNaN(value)) {
							this.payZs= prev + curr;
						} else {
							this.payZs= prev;
						}
					}, 0);
				}
				if (!values.every(value => isNaN(value))) {
					sums[index] = values.reduce((prev, curr) => {
						const value = Number(curr);
						if (!isNaN(value)) {
							return prev + curr;
						} else {
							return prev;
						}
					}, 0);
					sums[index] += ' 万元';
				} else {
					sums[index] = '';
				}
			});

			return sums;
		},
		//搜索
		upsearch() {
			this.$refs.table.upData(this.search)
		},
		showProject(row, index) {
			this.payZs=0;
			this.costList=[]
			this.form.projectId = row.projectId
			this.form.title = row.title
			this.form.projectTypeName = row.projectTypeName
			this.form.projectCode = row.projectCode
			this.form.chargeUserName = row.chargeUserName
			this.form.totalCost = row.totalCost
			this.form.joinUserName = row.joinUserName
			this.form.beginTime = row.beginTime
			this.form.endTime = row.endTime
			this.form.budgetAccountName = row.budgetAccountName
			this.form.cashFrom = row.cashFrom
			this.form.remark = row.remark
			this.form.attachId = row.attachId
			this.getUserListByAccountIds(row.joinUser);
			this.$refs.tableMx.upData({projectId:row.projectId});
		},
		async getUserListByAccountIds(accountIds) {
			let res = await this.$API.system.user.getUserListByAccountIds.get({accountIds: accountIds});
			if (res.code == 200) {
				let arr = [];
				if (res.data != undefined) {
					res.data.forEach(item => {
						arr.push(item.userName);
					})
				}
				this.form.joinUserName = arr.join(",");
			}
		},
		async getBudgetProjectList() {
			var res = await this.$API.finance.budget.getAllBudgetAccountList.get();
			this.budgetAccountList = res.data;
		},
	}
}
</script>

<style>
</style>
